<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box {
			width: 400px;
			height: 200px;
			border: 1px solid #ccc;
			margin: 0 auto;
		}

		ul {
			list-style: none;
		}

		#ul {
			display: flex;
			margin: 0;
			padding: 0;
		}

		#ul li {
			background-color: pink;
			padding: 10px;
			border-right: 1px solid #ccc;
			cursor: pointer;
			flex: 1;
			text-align: center;
		}

		#ul1 {
			padding: 0;
			margin: 0;
		}

		#ul1 li {
			height: 163px;
			line-height: 163px;
			text-align: center;
			background-color: yellow;
			display: none;
		}

		#ul1 li.show {
			display: block;
		}

		#ul .active {
			background-color: aqua;
			color: red;
			border-bottom: 2px solid red;
		}
	</style>
</head>

<body>
	<div class="box">

		<ul id="ul">
			<li class="active">鞋子</li>
			<li>袜子</li>
			<li>裤子</li>
			<li>裙子</li>
		</ul>

		<ul id="ul1">
			<li class="show">鞋子区域</li>
			<li>袜子区域</li>
			<li>裤子区域</li>
			<li>裙子区域</li>
		</ul>

	</div>

	<script src="../jquery-1.12.4.js"></script>
	<script>
		// $('#ul').on('click', 'li', function () {
		// 	$(this).addClass("active").siblings().removeClass("active");
		// 	$("#ul1 li").eq($(this).index()).show().siblings().hide();
		// })

		//原生js方式实现
		var ulObj = document.getElementById('ul')
		var olObj = ulObj.children
		var ul1Obj = document.getElementById('ul1')
		var ol1Obj = ul1Obj.children

		for (var i = 0; i < olObj.length; i++) {
			olObj[i].index = i; //在点击之前 将索引保存起来
			//设置给个li的索引
			// olObj[i].setAttribute('index', i)
			olObj[i].onclick = function () {
				//获取点击每个li的索引
				// alert(this.getAttribute('index', i))
				for (var j = 0; j < olObj.length; j++) {
					olObj[j].className = ""
				}
				this.className = 'active'
				for (var k = 0; k < ol1Obj.length; k++) {
					ol1Obj[k].className = ''
				}
				ol1Obj[this.index].className = 'show'
			}
		}
	</script>


</body>

</html>